<template>
	<div class="trans" :style="{width:width}">
		<div class="trans-search" :style="{width:width}">
			<el-input v-model="searchForm.key" placeholder="请输入名称"></el-input>
			<el-button type="primary" @click="transSearch">查询</el-button>
		</div>
		<div class="trans-main">
			<div class="trans-table">
				<div class="trans-data">
					<el-checkbox :indeterminate="isIndeterminate" v-model="allSelect" @change="selectAll">全选</el-checkbox>
				  <el-checkbox v-for="m in listData" :label="m.name" :key="m.id" v-model="m.select" @change="selectOne(m)">{{m.name}}</el-checkbox>
				</div>
				<div class="trans-add">
					<ul>
						<li v-for="(m,index) in selectData" :key="m.id">{{m.name}}<i class="el-icon-delete" @click="deleteCheck(index)"></i></li>
					</ul>
				</div>
			</div>
			<div class="table-page">
				<el-pagination
					background
					@size-change="changePage"
					@current-change="transSearch"
					:current-page.sync="searchForm.pageIndex"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal">
				</el-pagination>
			</div>
		</div>
		<div class="trans-search" :style="{width:width}">
			<el-button type="primary" @click="transAdd" :disabled="!selectData.length">添加</el-button>
		</div>
	</div>
</template>
<style scope>
.trans{
	margin:0 auto;
	border:1px solid #dadada;
}
.trans-search{
	padding:10px 20px;
	text-align: right;
}
.trans-main{
	width:100%;
	min-height: 300px;
	max-height: 600px;
	overflow: auto;
}
.trans-search .el-input{
	width:75%;
}
.trans-table{
	display: table;
}
.trans-add{
	border-left: 1px solid #dadada;
}
.trans-data,.trans-add{
	display: table-cell;
	width: 50%;
	padding: 10px;
}
.trans-data .el-checkbox{
	width: 100%;
	padding: 10px 20px;
	margin:0;
}
.trans-add ul li{
	margin: 5px;
	padding: 2px 10px;
	display: inline-block;
	text-align: left;
	border: 1px solid #cacaca;
	border-radius: 5px;
}
.trans-add ul li:hover{
	border: 1px solid #409EFF;
	color:#409EFF;
}
.el-icon-delete{
	cursor: pointer;
}
.table-page{
	margin: 10px 0 0 25px;
	text-align: left;
}
</style>
<script>
	  export default {
			props: {
				pageTotal:{
					type: Number,
      		default: 0
				},
				listData:{
					type: Array,
      		default: []
				},
				width:{
					type: String,
      		default: '500px'
				},
			},
			computed:{
				isIndeterminate(){
					let data=[];
					this.listData.forEach(val=>{
						this.selectData.some(select=>{return select.id===val.id})?data.push(val):null
					});
					return !!data.length&&!this.allSelect;
				}
			},
		  data () {
          return {
						allSelect:false,
						searchForm:{
							key:'',
							pageSize:10,
							pageIndex:1
						},
						selectData:[]
          }
      },
      mounted(){
				this.selectData=[];
				this.resetCheck();
      },
      methods:{
				selectOne(val){
					let index=this.selectData.findIndex(select=>{return select.id===val.id});
					if(index<0){
						this.selectData.push(val);
					}else{
						this.selectData.splice(index,1)
					}
					this.allSelect=this.setAllcheck();
				},
				selectAll(val){
					if(!val){
						this.listData.forEach((row,index) => {
							row.select=false;
							this.selectData.splice(this.selectData.findIndex(select=>{return select.id===row.id}),1);
							this.$set(this.listData,index,row);
	          });
					}else{
						this.listData.forEach((row,index) => {
							row.select=true;
							!this.selectData.some(select=>{return select.id===row.id})?this.selectData.push(row):null;
							this.$set(this.listData,index,row);
	          });
					}
				},
				setAllcheck(){
					let data=0;
					this.listData.forEach(val=>{
						this.selectData.some(select=>{return select.id===val.id})?data++:null
					});
					return data===this.listData.length;
				},
				changePage(size){
	        this.searchForm.pageIndex=1;
	        this.searchForm.pageSize=size;
	        this.transSearch();
	      },
				transSearch(){
					this.$emit('transSearch',this.searchForm)
				},
				transAdd(){
					this.$emit('transAdd',this.selectData)
				},
				deleteCheck(index){
					this.selectData.splice(index,1);
					this.resetCheck();
				},
				resetCheck(){
					if(!!this.listData.length) {
	          this.listData.forEach((row,index) => {
							row.select=this.selectData.some(select=>{return select.id===row.id});
							this.$set(this.listData,index,row);
	          });
						this.allSelect=this.setAllcheck();
	        }
				}
      }
	  }
</script>
